<%@ page language="java" pageEncoding="utf-8"%>
<%@page import="com.farm.web.constant.FarmConstant"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/view/conf/farmtag.tld" prefix="PF"%>
<!-- Modal -->
<div class="modal fade bs-example-modal-lg" id="classhourForm"
	tabindex="-1" role="dialog" aria-labelledby="hourOpLabel">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="hourOpLabel">课时信息</h4>
			</div>
			<div class="modal-body"
				style="margin-bottom: 0px; padding-bottom: 0px;">
				<form method="post" id="submithourFormId"
					action="classweb/savebase.do">
					<input name="classid" id="chapterId" type="hidden"> <input
						name="id" id="hourId" type="hidden">
					<fieldset id="hourfieldsetId">
						<div class="row">
							<div class="col-xs-12">
								<div class="form-group" id="hourFileGroupId">
									<div class="row">
										<div class="col-xs-3">
											<div class="form-group" id="filemodelGroupId">
												<label for="progressisId" class="control-label">课件类型&nbsp;<span
													class="text-danger">*</span></label> <select id="filemodelId"
													name="filemodel" val="1" class="form-control">
													<option value="1">附件</option>
													<option value="2">外链文件</option>
													<option value="3">外链iframe</option>
												</select> <span id="filemodelErrorId" class="help-block"></span>
											</div>
										</div>
										<div class="col-xs-9">
											<div id="localFile">
												<label for="hourFileId" class="control-label">课件文件&nbsp;&nbsp;&nbsp;<span
													style="font-weight: 200; font-size: 12px;">课件仅支持MP4和PDF文件（PDF文件请勿大于100m,建议MP4比特率小于512Kbps）</span></label>
												<div class="row">
													<div class="col-xs-6">
														<input type="text" class="form-control" id="hourFileId"
															readonly="readonly"></input> <input type="hidden"
															class="form-control" name="fileid" id="hourFileIdValId"></input>
													</div>
													<div class="col-xs-6"><jsp:include
															page="/view/web-simple/commons/fileUploadCommons.jsp">
															<jsp:param value="hourfile" name="appkey" />
															<jsp:param value="HOUR" name="type" />
															<jsp:param value="上传课件" name="title" />
														</jsp:include><button onclick="openHourFileChooseWin()" type="button"
															class="btn btn-warning btn-sm">选择课件</button>
														<a onclick="hourFilePlay()" type="button"
															class="btn btn-success btn-sm">课件播放</a>
													</div>
												</div>
												<span id="hourFileErrorId" class="help-block"></span>
											</div>
											<div id="outurl" style="display: none;">
												<div class="form-group" id="fileurlGroupId">
													<label for="fileurlId" class="control-label">外部课件资源地址&nbsp;</label>
													<input name="fileurl" type="text" class="form-control"
														id="fileurlId" placeholder="仅支持mp4文件，或用于iframe中引入的链接地址"> <span
														id="fileurlErrorId" class="help-block"></span>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-xs-3">
										<div class="form-group" id="hourSortGroupId">
											<label for="hourSortId" class="control-label">排列顺序&nbsp;<span
												class="text-danger">*</span></label> <input name="sort" type="text"
												class="form-control" id="hourSortId" placeholder="整数">
											<span id="hourSortErrorId" class="help-block"></span>
										</div>
									</div>
									<div class="col-xs-6">
										<div class="form-group" id="hourTitleGroupId">
											<label for="hourTitleId" class="control-label">课时名称&nbsp;<span
												class="text-danger">*</span></label> <input name="title" type="text"
												class="form-control" id="hourTitleId" placeholder="课时名称">
											<span id="hourTitleErrorId" class="help-block"></span>
										</div>
									</div>
									<div class="col-xs-3">
										<div class="form-group" id="altimeGroupId">
											<label for="altimeId" class="control-label">时长/分&nbsp;<span
												class="text-danger">*</span></label> <input name="altime"
												type="text" class="form-control" id="altimeId"
												placeholder="学习时长" value="${classview.classt.altime}">
											<span id="altimeErrorId" class="help-block"></span>
										</div>
									</div>
								</div>
								<div class="row" id="hourPlusForm">
									<div class="col-xs-3">
										<div class="form-group" id="progressisGroupId">
											<label for="progressisId" class="control-label">展示进度条&nbsp;<span
												class="text-danger">*</span></label> <select id="progressisId"
												name="progressis" val="1" class="form-control">
												<option value="1">是</option>
												<option value="0">否</option>
											</select> <span id="hourSortErrorId" class="help-block"></span>
										</div>
									</div>
									<div class="col-xs-3">
										<div class="form-group" id="continuisGroupId">
											<label for="continuisId" class="control-label">支持续播&nbsp;<span
												class="text-danger">*</span></label><select id="continuisId"
												name="continuis" val="1" class="form-control">
												<option value="1">是</option>
												<option value="0">否</option>
											</select> <span id="altimeErrorId" class="help-block"></span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<jsp:include page="loadExistHourFiles.jsp"></jsp:include>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<div class="form-group" id="hourNoteGroupId"
									style="margin-bottom: 0px;">
									<label for="hourNoteId" class="control-label">课时说明（显示在课件下方）</label>
									<div class="form-control"
										style="height: 305px; padding: 0px; border: 0px; border-right: 1px solid #cccccc; overflow: hidden;">
										<iframe id="hourTextId"
											style="width: 100%; border: 0px; height: 305px; padding: 0px; margin: 0px;"></iframe>
										<input name="note" type="hidden" class="form-control"
											id="hourNoteId" placeholder="课时说明">
									</div>
								</div>
							</div>
						</div>
					</fieldset>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" id="hourSubmitButtonId"
					onclick="submithourForm();" class="btn btn-success">提交课时</button>
				<p class="bg-danger"
					style="padding: 20px; margin-top: 20px; color: #f01414; display: none;"
					id="hourErrorsShowboxId"></p>
			</div>
		</div>
	</div>
</div>
<script>
	$(function() {
		$('select', '#submithourFormId').each(function(i, obj) {
			var val = $(obj).attr('val');
			$(obj).val(val);
		});
		validateInput('hourTitleId', function(id, val, obj) {
			// 标题
			if (valid_isNull(val)) {
				return {
					valid : false,
					msg : '不能为空'
				};
			}
			if (valid_maxLength(val, 128)) {
				return {
					valid : false,
					msg : '长度不能大于' + 128
				};
			}
			return {
				valid : true,
				msg : '正确'
			};
		}, 'hourTitleErrorId', 'hourTitleGroupId');
		validateInput('altimeId', function(id, val, obj) {
			// 时长
			if (valid_isNull(val)) {
				return {
					valid : false,
					msg : '不能为空'
				};
			}
			if (!valid_isNumber(val)) {
				return {
					valid : false,
					msg : '必须为数字'
				};
			}
			return {
				valid : true,
				msg : '正确'
			};
		}, 'altimeErrorId', 'altimeGroupId');
		validateInput('hourSortId', function(id, val, obj) {
			// 排序
			if (valid_isNull(val)) {
				return {
					valid : false,
					msg : '不能为空'
				};
			}
			if (!valid_isNumber(val)) {
				return {
					valid : false,
					msg : '必须为数字'
				};
			}
			return {
				valid : true,
				msg : '正确'
			};
		}, 'hourSortErrorId', 'hourSortGroupId');
		validateInput('hourFileId', function(id, val, obj) {
			// 课件文件
			if (valid_isNull(val) && $("#filemodelId").val() == '1') {
				return {
					valid : false,
					msg : '请上传课件文件或者填写外部课件地址'
				};
			}
			return {
				valid : true,
				msg : '正确'
			};
		}, 'hourFileErrorId', 'hourFileGroupId');
		validateInput('fileurlId', function(id, val, obj) {
			// 课件资源
			if (valid_isNull(val)
					&& ($("#filemodelId").val() == '2' || $("#filemodelId")
							.val() == '3')) {
				return {
					valid : false,
					msg : '请填写外部课件地址'
				};
			}
			return {
				valid : true,
				msg : '正确'
			};
		}, 'fileurlErrorId', 'fileurlGroupId');

		$("#filemodelId").change(function() {
			initFilemode();
		});

	});
	//初始化附件表单样式
	function initFilemode() {
		//要触发的事件
		if ($("#filemodelId").val() == '1') {
			$('#localFile').show();
			$('#outurl').hide();
			$('#hourPlusForm').show();
		}
		if ($("#filemodelId").val() == '2') {
			$('#outurl').show();
			$('#localFile').hide();
			$('#hourPlusForm').show();
			$('#fileurlId').attr('placeholder','仅支持h264编码的mp4文件');
		}
		if ($("#filemodelId").val() == '3') {
			$('#outurl').show();
			$('#localFile').hide();
			$('#hourPlusForm').hide();
			$('#fileurlId').attr('placeholder','请录入URL，该URL将作为iframe组件地址');
		}

	}
	//初始化表单
	function inithourForm(chapterid, hourid) {
		$('#hourfieldsetId,#chapterId').val(chapterid);
		if (hourid) {
			$('#hourOpLabel').text("編輯课时");
			$('#hourfieldsetId,fieldset').attr('disabled', 'disabled');
			$('#hourSubmitButtonId').attr('disabled', 'disabled');
			$.post('classweb/loadhour.do', {
				'hourid' : hourid
			},
					function(flag) {
						if (flag.STATE == 0) {
							$('#hourfieldsetId,fieldset')
									.removeAttr("disabled");
							$('#hourSubmitButtonId').removeAttr("disabled");
							$('#hourfieldsetId,#hourId').val(flag.entity.id);
							$('#hourfieldsetId,#hourTitleId').val(
									flag.entity.title);
							$('#hourfieldsetId,#hourNoteId').val(
									flag.entity.note);
							$('#hourfieldsetId,#hourSortId').val(
									flag.entity.sort);
							$('#hourfieldsetId,#fileurlId').val(
									flag.entity.fileurl);
							$('#hourfieldsetId,#progressisId').val(
									flag.entity.progressis);
							$('#hourfieldsetId,#filemodelId').val(
									flag.entity.filemodel);
							$('#hourfieldsetId,#continuisId').val(
									flag.entity.continuis);
							if (flag.persist) {
								$('#hourfieldsetId,#hourFileId').val(
										flag.persist.name);
							} else {
								$('#hourfieldsetId,#hourFileId').val('');
							}
							$('#hourfieldsetId,#hourFileIdValId').val(
									flag.entity.fileid);
							$('#hourfieldsetId,#altimeId').val(
									flag.entity.altime);
							$('#hourTextId').attr(
									'src',
									'classweb/showIframeText.do?hourid='
											+ flag.entity.id);
							initFilemode();
						} else {
							alert(flag.MESSAGE);
						}
					}, 'json');
		} else {
			$('#hourfieldsetId,#hourId').val('');
			$('#hourfieldsetId,#hourTitleId').val('');
			$('#hourfieldsetId,#hourNoteId').val('');
			$('#hourfieldsetId,#fileurlId').val('');
			$('#hourfieldsetId,#hourSortId').val('');
			$('#hourfieldsetId,#filemodelId').val('1');
			$('#hourfieldsetId,#hourFileId').val('');
			$('#hourfieldsetId,#hourFileIdValId').val('');
			$('#hourfieldsetId,#altimeId').val('');
			$('#hourOpLabel').text("创建课时");
			$('#hourTextId').attr('src', 'classweb/showIframeText.do?hourid=');
		}
	}

	//提交表单
	function submithourForm() {
		if (!validate('submithourFormId')) {
			$('#hourErrorsShowboxId').text('信息录入有误，请检查！');
			$('#hourErrorsShowboxId').show();
			return;
		}
		$('#hourErrorsShowboxId').text('');
		$('#hourErrorsShowboxId').hide();
		if (confirm("是否提交本课时？")) {
			$('#hourSubmitButtonId').attr('disabled', 'disabled');
			var iframeNote = document.getElementById("hourTextId").contentWindow
					.getEditorcontent();
			$.post('classweb/savehour.do', {
				'title' : $('#hourTitleId').val(),
				'fileid' : $('#hourFileIdValId').val(),
				'text' : iframeNote,
				'chapterid' : $('#chapterId').val(),
				'altime' : $('#altimeId').val(),
				'sort' : $('#hourSortId').val(),
				'fileurl' : $('#fileurlId').val(),
				'progressis' : $('#progressisId').val(),
				'continuis' : $('#continuisId').val(),
				'id' : $('#hourfieldsetId,#hourId').val(),
				'filemodel' : $('#filemodelId').val()
			}, function(flag) {
				if (flag.STATE == 0) {
					//alert("提交成功");
					$('#myModal').modal('hide')
					location.reload();
				} else {
					alert(flag.MESSAGE);
					$('#hourfieldsetId,fieldset').removeAttr("disabled");
					$('#hourSubmitButtonId').removeAttr("disabled");
				}
			}, 'json');
		}
	}
	//图片提交成功
	function fileUploadHandle(appkey, url, id, fileName) {
		if ('hourfile' == appkey) {
			$('#hourFileId').val(fileName);
			$('#hourFileIdValId').val(id);
		}
	}
	//课件文件播放
	function hourFilePlay() {
		var fileid = $('#hourFileIdValId').val();
		var fileurl = $('#fileurlId').val();
		if ($("#filemodelId").val() == '1') {
			fileurl="";
		}
		if (!fileid && !fileurl) {
			alert("请先上传课件文件或填写资源地址url!");
		} else {
			var uri = encodeURIComponent(encodeURIComponent(fileurl));
			window.open("<PF:basePath/>classweb/hourFilePlay.do?fileurl=" + uri
					+ "&fileid=" + fileid);
		}
	}
</script>